<%inherit file="/base.mako"/>\

<%def name="header()">${h.titlecase(c.school.school)}</%def>

<% width = len(c.year_query) * 50 %>
<div id='yearbyyear' class='graph' style='width: ${width}px; height: 200px;'></div>

##<p>Show data table &raquo;</p>

<table class="data">
  <tr>
    <th>Year</th>
    <th>Asian</th>
    <th>Black</th>
    <th>Hispanic</th>
    <th>Native American</th>
    <th>White</th>
  </tr>
  % for year in c.year_query:
  <tr>
    <td>
      <a href="${h.url("school_detail_with_year", school=c.school, year=year.year)}">
        ${year.year}
      </a>
    </td>
    <td>${year.asian}</td>  
    <td>${year.black}</td>  
    <td>${year.hispanic}</td>
    <td>${year.nativeamerican}</td>  
    <td>${year.white}</td>  
  </tr>
  % endfor
</table>

<script type="text/javascript"> 
jQuery(document).ready(function () {
  jQuery('#yearbyyear').tufteBar({
    data: [
      % for year in c.year_query:
      [[${year.white},
        ${year.nativeamerican}, 
        ${year.hispanic}, 
        ${year.black}, 
        ${year.asian}, ],  {label: '${year.year}'}],
      % endfor
    ],

    barWidth: 0.8, 

    barLabel:  function(index) { 
      //return $.tufteBar.formatNumber(this[0]) + 'x' 
      return '';
    }, 

    // The label on the x-axis - can contain HTML
    axisLabel: function(index) { return this[1].label }, 

    // Stacked graphs also pass a stackedIndex parameter
    color: function(index, stackedIndex) { 
      return ['#683B1A', '#E8970A', '#F5D600', '#93B216', '#0093BB'][stackedIndex] //% 2] 
    },

 
    // Legend is optional
    legend: {
      // Data can be an array of any type of object, but the default
      // formatter works with strings
      data: ["White", "Native American", "Hispanic", "Black",  "Asian"], 

      // By default, the colors of the graph are used
      color: function(index) { 
        return ['#683B1A', '#E8970A', '#F5D600', '#93B216', '#0093BB'][index];
      },

      // You can customize the element label - can contain HTML
      label: function(index) { return this }
    }
  });
});

</script>
